import IpListModal from '@/components/ipListModal/ipListModal';
import { getWebSiteInfo, updateWebsiteInfo } from '@/services/linkManager';
import { PageContainer, ProFormRadio } from '@ant-design/pro-components';
import { ProForm, ProFormText } from '@ant-design/pro-form';
import {Button, Form, Input, message, Space} from 'antd';
import { useForm } from 'antd/es/form/Form';
import React, { useEffect, useState } from 'react';
import {CheckOutlined, UndoOutlined} from "@ant-design/icons";
const { TextArea } = Input;

const BasicInfo: React.FC = () => {
  const [form] = useForm();

  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };

  //IpModal
  const [isIpShow, setIsIpShow] = useState<boolean>(false);
  //IpModal
  const [ipList, setIpList] = useState<any>([]);
  const [form1,setForm] = useState({});
  const initialBasicInfo = async () => {
    const webInfo = await getWebSiteInfo();
    setForm(webInfo.data)
    if (!!webInfo.data?.blockIpList) {
      setIpList(webInfo.data.blockIpList.toString().replaceAll(',', ';'));
    }
    form.setFieldsValue(webInfo.data);
    if (webInfo.data?.openStatus === 'open') form.setFieldValue('openStatus', 'open');
    else if (webInfo.data?.openStatus === 'close') form.setFieldValue('openStatus', 'close');

    form.setFieldValue(
      'blockIpList',
      webInfo.data?.blockIpList && webInfo.data?.blockIpList.toString().replaceAll(',', ';'),
    );
  };

  // const [infoValues, setInfoValues] = useState([]);

  useEffect(() => {
    initialBasicInfo();
  }, []);
  const config = {
    headers: { 'Content-Type': 'application/json' },
    method: 'POST',
  };
  const handleSubmitInfo = async () => {
    const submitFormValues = form.getFieldsValue();
    const newSubmitFormValues = {
      ...submitFormValues,
      blockIpList: [submitFormValues.blockIpList],
    };
    try{
      const submitRes = await updateWebsiteInfo(newSubmitFormValues);
      // const submitRes = axios.post('/api/v1/link/updateWebsiteInfo', submitFormValues, config)
      if (submitRes.code === '0') {
        message.success('提交成功');
      } else if(submitRes.code!='A200'){
        message.error(submitRes.message);
      }
    }catch (e){
      message.error(e.response.data.message);
    }

  };
  return (
    <PageContainer>
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        // initialValues={infoValues}
        // onReset={onReset}
        onFinish={handleSubmitInfo}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />重置</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />确定</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <ProFormText width="md" name="founder" placeholder="请填写网站创始人" label="网站创始人" defaultValue={form1.founder}/>
        <ProFormText width="md" name="address" placeholder="请填写网站地址" label="网站地址" />
        <ProFormText width="md" name="name" placeholder="请填写网站名称" label="网站名称" />
        <ProFormText width="md" name="attribute" placeholder="请填写网站属性" label="网站属性" />
        <ProFormText
          width="md"
          name="clusterAttribute"
          placeholder="请填写集群属性"
          label="集群属性"
        />
        <Form.Item label="网站简介" name="introduction">
          <TextArea
            className=""
            showCount
            maxLength={300}
            // style={{ height: 120, marginBottom: 24, width: 300}}
            // onChange={onChange}
            placeholder="输入网站简介"
          />
        </Form.Item>

        <ProFormRadio.Group
          name="openStatus"
          label="网站关闭"
          options={[
            {
              label: '正常开放',
              value: 'open',
            },
            {
              label: '网站关闭',
              value: 'close',
            },
          ]}
        />
        <ProFormRadio.Group
          name="isFlow"
          label="流量统计"
          options={[
            {
              label: '启动',
              value: 1,
            },
            {
              label: '关闭',
              value: 0,
            },
          ]}
        />
        <Form.Item label="ip黑名单(用分号分开)" name="blockIpList">
          {/* <Button onClick={() => setIsIpShow(true)}>添加黑名单</Button> */}
          <TextArea name="iplist" placeholder="请填写黑名单ip地址（用分号分开）" />
        </Form.Item>
      </ProForm>
      {/* <IpListModal
        title="ip列表"
          isIpShow={isIpShow}
          setIsIpShow={setIsIpShow}
          ipList={ipList}
          setIpList={setIpList}
        /> */}
    </PageContainer>
  );
};
export default BasicInfo;
